<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
			<view slot="content">{{i18n['我的订单']}}</view>
		</fu-custom>
		<fu-tab :tabs="navList" :sticky="true" line-height="8" radius="80" bottom="0" :top="CustomBar" node-title="text"
			@change="tabClick" node-key="state" :current="type" current-key="type" line-color="#ffffff"
			active-color="#333"></fu-tab>
		<!-- 订单状态栏Tab-结束 -->
		<!-- 订单列表-开始 -->
		<view class="padding-lr-sm padding-top-sm">
			<block v-for="(item, index) in listData" :key="index">
				<order-item v-if="type !== 'refund'" :item="item" :index="index" :mewNum="evaluate_meowcoins"
					@showCancelReason="showCancelReason" @hexiao="hexiao(item)"></order-item>
				<afterorder-item v-else :item="item" :index="index"></afterorder-item>
			</block>
		</view>
		<!-- 订单列表-结束 -->
		<!-- 分页组件 start -->
		<fu-empty :paging-list-loaded-all="pagingListLoadedAll" :paging-list-no-list-data="pagingListNoListData"
			:list-data-length="listDataLength" :isLoadInit='isLoadInit'></fu-empty>
		<!-- 分页组件 end -->
		<!-- 取消订单弹出层-开始 -->
		<fu-popup v-model="showPopup" mode="bottom" border-radius="24">
			<view class="bg-white">
				<view class="flex justify-between align-center padding-lr padding-top fu-fs32">
					<view class="text-bf" @click="showPopup = false">{{ i18n['取消'] }}</view>
					<view class="text-bold fu-fs36 text-333">{{ i18n['取消订单'] }}</view>
					<view class="text-theme" @click="cancelOrder()">{{ i18n['确定'] }}</view>
				</view>
				<view class="margin-top">
					<view class="fu-fs28 text-666 bg-f8 padding-lr padding-tb-sm">{{ i18n['请选择取消订单原因'] }}</view>
					<scroll-view scroll-y="true" class="padding-tb" style="max-height: 400rpx; min-height: 200rpx">
						<view class="padding-lr">
							<view @click="onChangeReson(item, index)"
								class="flex align-center justify-between padding-bottom"
								v-for="(item, index) in reasonList" :key="index">
								<view class="text-333 fu-fs32">{{ item.reason }}</view>
								<image class="fu-block-32" v-if="index == cancelObj.current"
									:src="imgBaseUrl + 'checked.png'" mode="aspectFit"></image>
								<image class="fu-block-32" v-else :src="imgBaseUrl + 'unchecked.png'"
									mode="aspectFit"></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</fu-popup>
		<!-- 取消订单弹出层-结束 -->
		<!-- 核销码弹窗 -->
		<fu-popup v-model="hxPopup" mode="center" border-radius="16">
			<view class="hx-popup">
				<view class="bg-white hx-box flex flex-direction align-center">
					<view class="fu-fs28 text-bold text-333">核销码：{{picke_code}}</view>
					<image :src="picke_code_img" class="fu-block-280 margin-top-32"></image>
					<!-- <view class="btn margin-top-32" @click="save">保存到相册</view> -->
				</view>
				<image src="https://localelife.chunchuangkeji.cn/h5img/images/close-2.png" class="fu-block-36 margin-top-80" @click="hxPopup = false"></image>
			</view>
		</fu-popup>
		<!-- 断网监测 -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	/** 订单状态列表
	 * all 全部订单
	 * unpay 待付款订单
	 * unship 待发货订单
	 * unreceive 待收货订单
	 * finish 待评价订单
	 * refund 退款/售后
	 * */
	import orderItem from '../../components/order-item/order-item.vue';
	import afterorderItem from '../../components/order-item/afterorder_item.vue';
	import pagingList from '@/common/mixin/paging_list.js' //引入混合开发
	export default {
		mixins: [pagingList],
		components: {
			orderItem,
			afterorderItem
		},
		data() {
			return {
				tabCurrentIndex: 0, // tab切换选中状态下标
				type: 'all', // 当前选中的状态key
				navList: [{
						state: 0,
						text: global.i18n['全部'],
						type: 'all'
					},
					{
						state: 1,
						text: '待使用',
				 	type: 'unship'
					},
					{
						state: 4,
						text: global.i18n['待评价'],
						type: 'finish'
					},
					{
						state: 3,
						text: '已完成',
						type: 'evaluate'
					},
					{
						state: 5,
						text: global.i18n['退款/售后'],
						type: 'refund'
					}
				], // 订单状态切换列表
				minixPagingListsApi: global.apiUrls.getOrderList, //明细请求地址
				pageingListApiMethod: "post", //请求方法
				allowOnloadGetList: false, // 是否允许页面onload生命周期进入后立马执行getlist
				showPopup: false, // 控制取消订单弹出层是否显示
				reasonList: [], //取消原因列表
				themeColor:'#B03C31',
				cancelObj: {
					//订单取消对象
					current: -1, //当前原因索引
					id: '', //档原因id
					orderSn: null, //要取消的订单号
					index: null, //要取消的订单在列表中的索引
					orderItem: {} //当前订单对象
				},
				hxPopup: false,
				picke_code: '', //核销码
				picke_code_img: '', //核销码图片
				timer:null,
				evaluate_meowcoins:'',//评论送喵币
			};
		},
		onLoad(options) {
			this.setNavigationBarTitle(this.i18n['我的订单']);
			// 跳转订单列表未携带参数时默认全部状态
			const {
				type = 'all'
			} = options;
			// 获取当前选中状态的tab数据 包括下标，类型等
			const _item = this.navList.find(item => item.type == type);

			this.tabCurrentIndex = _item.state;
			this.type = _item.type;
			this.pagingListToggle();
			this.getReasonList();
			// 监听页面更新
			uni.$on('onPageUpdata', this.onPageUpdata);
			uni.$on('onPageUpdata2', res => {
				this.pagingListToggle();
			})
			this.geyMewNum()
		},
		onUnload() {
			// 移除页面更新监听
			uni.$off('onPageUpdata');
			uni.$off('onPageUpdata2');
		},
		methods: {
			// 获取喵币配置
			geyMewNum(){
				this.$api.post(global.apiUrls.postMewConfig).then(res=>{
					if(res.data.code == 1){
						let data = res.data.data
						this.evaluate_meowcoins = data.evaluate_meowcoins
					}
				})
			},
			save() {
				uni.getImageInfo({
					src: this.picke_code_img,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
						  filePath: res.path,
						  success: (res) => {
						    this.$message.info('保存成功');
						  },
						  fail:(err)=>{
							  console.log(err)
						  	this.$message.info('保存失败')
						  }
						})
					}
				})
			},
			/**
			 * @description  设置要请求的参数
			 * 在混入开发时，调用该方法和混入的请求参数合并在一起
			 */
			pagingListPostData() {
				let type;
				if (this.type == 'refund') {
					this.minixPagingListsApi = global.apiUrls.getGoodsAfterSale;
				} else {
					this.minixPagingListsApi = global.apiUrls.getOrderList;
					type = this.type
				}
				return {
					type: type,
				}
			},
			/**
			 * @description 获取取消原因列表
			 */
			getReasonList() {
				this.$api
					.post(global.apiUrls.getReasonList, {
						type: 2
					})
					.then(res => {
						let data = res.data;
						if (data.code == 1) {
							this.reasonList = data.data;
						}
					});
			},
			// ok
			tabClick(e) {
				let index = e.index;
				if (this.tabCurrentIndex == index) return;
				this.tabCurrentIndex = index;
				this.type = this.navList[index].type;
				// if(e.index != 0){
					setTimeout(()=>{
						this.pagingListToggle();
					},300)
				// }
				
			},
			/**
			 * @description 监听页面更新的回调函数
			 * @param {Object} e = 要更新的配置参数
			 */
			onPageUpdata(e) {
				let index = e.index;
				let item = this.listData[index];
				switch (e.type) {
					case 1: // 取消订单
						if (this.tabCurrentIndex == 0) {
							item.status = -1;
							this.listData.splice(index, 1, item);
						} else {
							this.listData.splice(index, 1);
						}
						break;
					case 2: // 提醒发货
						item.is_remind.info = 1;
						this.listData.splice(index, 1, item);
						break;
					case 3: //确认收货
						if (this.tabCurrentIndex == 0) {
							item.status = 3;
							this.listData.splice(index, 1, item);
						} else {
							this.listData.splice(index, 1);
						}
						break;
					case 4: //删除订单
						this.listData.splice(index, 1);
						break;
					case 5: //评价
						if (this.tabCurrentIndex == 0) {
							item.status = 4;
							this.listData.splice(index, 1, item);
						} else {
							this.listData.splice(index, 1);
						}
						break;
					case 6: // 提交售后
						this.pagingListToggle();
						break;
					case 7: // 删除售后订单
						if (this.tabCurrentIndex == 5) {
							this.listData.splice(index, 1);
						} else {
							this.pagingListToggle();
						}
						break;
					case 8: // 付款成功
						this.pagingListToggle();
						// if (this.tabCurrentIndex == 0) {
						// 	item.status = 1;
						// 	this.listData.splice(index, 1, item);
						// } else {
						// 	this.listData.splice(index, 1);
						// }
						break;
					case 9: // 开票成功
						item.invoice_status = 1;
						this.listData.splice(index, 1, item);
						break;
					default:
						break;
				}
			},
			// 核销码
			hexiao(item) {
				console.log(item)
				uni.showLoading()
				this.$api.post(global.apiUrls.post64058657b2778, {
					order_sn: item.order_sn
				}).then(res => {
					uni.hideLoading()
					if (res.data.code == 1) {
						this.picke_code = res.data.data.picke_code
						this.picke_code_img = res.data.data.picke_code_img
						this.hxPopup = true
					} else {
						this.$message.info(res.data.msg)
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},
			/**
			 * @description 展示取消原因
			 * @param {Object} item = 当前订单项对象
			 * @param {Number} index = 当前订单在列表中的索引
			 */
			showCancelReason(e) {
				this.cancelObj.orderSn = e.item.order_sn;
				this.cancelObj.index = e.index;
				this.cancelObj.orderItem = e.item;
				this.cancelObj.current = -1;
				this.cancelObj.id = '';
				this.showPopup = true;
			},
			/**
			 * @description 取消订单
			 * @param {string} sn = 订单号
			 * */
			cancelOrder() {
				if (!this.cancelObj.id) return this.$message.info(this.i18n['请选择取消原因']);
				this.$api.post(global.apiUrls.postCancelOrder, {
					order_sn: this.cancelObj.orderSn,
					return_id: this.cancelObj.id
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						this.showPopup = false;
						this.cancelObj.id = '';
						uni.$emit('onPageUpdata', {
							type: 1, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，
							index: this.cancelObj.index,
						})
					} else {

					}
				}).catch(err => {
					this.$message.info('服务器错误，请稍后重试');
				});
			},

			/**
			 * @description 监听切换取消原因
			 * @param {Object} item = 当前原因项
			 * @param {Number} index = 当前原因在列表中的索引
			 */
			onChangeReson(item, index) {
				if (this.cancelObj.current == index) return false;
				this.cancelObj.current = index;
				this.cancelObj.id = item.id;
			},
		},
	};
</script>

<style lang="scss" scoped>
.hx-popup {
	text-align: center;
	.hx-box {
		width: 600rpx;
		border-radius: 16rpx;
		padding: 42rpx;
		box-sizing: border-box;
		.btn {
			box-sizing: border-box;
			width: 308rpx;
			height: 72rpx;
			border-radius: 40rpx;
			text-align: center;
			line-height: 72rpx;
			font-size: 28rpx;
			border: 1rpx solid #FF6229;
			color: #FF6F27;
		}
	}
}
</style>
